<template>
  <div class="list">
    <el-tabs v-model="activeName" class="border">
      <el-tab-pane v-for="(tab,index) in tabs" :key="index" :label="tab.label" :name="tab.name">
        <component :is="tab.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Teaching, LessonPreparation, Live, Report } from './list/index'

export default {
  name: 'List',
  components: {
    Teaching,
    Live,
    Report,
    LessonPreparation
  },
  data () {
    return {
      activeName: '',
      tabs: [{
        label: '教研报告',
        name: 'Report'
      }, {
        label: '教学设计',
        name: 'LessonPreparation'
      }, {
        label: '教研',
        name: 'Teaching'
      }, {
        label: '在线课程',
        name: 'Live'
      }]
    }
  },
  created () {
    this.activeName = this.$route.query && this.$route.query.activeTabName ? this.$route.query.activeTabName : this.tabs[0].name
  }
}
</script>

<style lang="scss" scoped>
</style>
